<div class="d-flex align-items-center justify-content-between">
  <h4 mat-dialog-title class="mb-2">
    {{ 'multiCluster.joining.title' | translate }}
  </h4>
  <button
    (click)="onCancel()"
    class="mb-2"
    aria-label="Close dialog"
    mat-icon-button>
    <i class="eos-icons">close</i>
  </button>
</div>
<hr class="fancy" />

<div>
  <div mat-dialog-content class="dialog-content p0 m0">
    <form #clusterForm="ngForm" class="pt-lg">
      <div class="d-flex flex-column flex-grow-1">
        <mat-form-field appearance="standard" class="flex-grow-1">
          <mat-label>{{ 'multiCluster.joining.name' | translate }}</mat-label>
          <input
            matInput
            [(ngModel)]="cluster.name"
            name="name"
            required
            [attr.maxlength]="'general.FILTER_MAX_LEN' | translate"
          />
        </mat-form-field>
      </div>
      <div class="d-flex justify-content-start align-items-center">
        <mat-form-field appearance="standard" class="flex-grow-1 mr-4">
          <mat-label>{{ 'multiCluster.joining.server' | translate }}</mat-label>
          <input
            matInput
            [(ngModel)]="cluster.host"
            name="cluster-host"
            [attr.maxlength]="'general.FILTER_MAX_LEN' | translate"
            required />
        </mat-form-field>
        <mat-form-field appearance="standard" class="flex-grow-1">
          <mat-label>{{ 'multiCluster.joining.port' | translate }}</mat-label>
          <input
            matInput
            [(ngModel)]="cluster.port"
            name="cluster-port"
            [attr.maxlength]="'general.FILTER_MAX_LEN' | translate"
            required />
        </mat-form-field>
      </div>
      <div class="d-flex flex-column flex-grow-1">
        <mat-form-field appearance="standard" class="flex-grow-1">
          <mat-label>{{ 'multiCluster.joining.token' | translate }}</mat-label>
          <textarea
            matInput
            [(ngModel)]="cluster.token"
            name="token"
            required
            (keyup)="parseToken()"
            (paste)="parseToken()"></textarea>
        </mat-form-field>
        <div class="invalid" *ngIf="invalidToken"> {{ 'multiCluster.validation.token' | translate }} </div>
      </div>
      <div class="d-flex justify-content-start align-items-center">
        <mat-form-field appearance="standard" class="flex-grow-1 mr-4">
          <mat-label>{{
            'multiCluster.promotion.server' | translate
          }}</mat-label>
          <input
            matInput
            [(ngModel)]="cluster.master_host"
            name="master-host"
            [attr.maxlength]="'general.FILTER_MAX_LEN' | translate"
            required />
        </mat-form-field>
        <mat-form-field appearance="standard" class="flex-grow-1">
          <mat-label>{{ 'multiCluster.promotion.port' | translate }}</mat-label>
          <input
            matInput
            [(ngModel)]="cluster.master_port"
            name="master-port"
            [attr.maxlength]="'general.FILTER_MAX_LEN' | translate"
            required />
        </mat-form-field>
      </div>

      <div class="d-flex justify-content-start align-items-center">
        <label class="radio-inline c-radio">
          <input
            id="https"
            type="radio"
            name="proxy"
            [(ngModel)]="useProxy"
            value="https" />
          {{ 'multiCluster.USE_HTTPS_PROXY' | translate }}
        </label>
      </div>
      <div class="d-flex justify-content-start align-items-center">
        <label class="radio-inline c-radio">
          <input
            id="none"
            type="radio"
            name="proxy"
            [(ngModel)]="useProxy"
            value="" />
          {{ 'multiCluster.NO_PROXY' | translate }}
        </label>
      </div>
      <mat-hint>
        {{ 'multiCluster.joining.hint' | translate }}
      </mat-hint>
    </form>
  </div>
  <div mat-dialog-actions class="d-flex justify-content-end align-items-center">
    <button
      mat-stroked-button
      aria-label="Cancel button"
      class="mr-2"
      (click)="onCancel()">
      {{ 'general.CANCEL' | translate }}
    </button>
    <button *ngIf="isProcessing"
            mat-raised-button
            color="primary"
            aria-label="processing">
      <i class="fa fa-spinner fa-spin"></i>
      {{ 'general.PROCESSING' | translate }}
    </button>
    <button *ngIf="!isProcessing"
      mat-raised-button
      color="primary"
      aria-label="submit"
      (click)="onConfirm()"
      [disabled]="clusterForm.invalid">
      {{ 'general.SUBMIT' | translate }}
    </button>
  </div>
</div>
